<template>
  <div id="confirmOrder">
    <van-nav-bar title="确认订单" left-arrow @click-left="onClickLeft" />
    <van-contact-card type="add" @click="onAdd" add-text="请选择一个收货地址" />
    <div class="van-address-item">
      <div class="van-cell van-cell--borderless">
        <span class="van-radio__label">
          <div class="van-address-item__name">
            {{ showAddress.name }} {{ showAddress.tel }}
            <van-tag v-if="showAddress.id == 1" type="primary">默认</van-tag>
          </div>
          <div class="van-address-item__address">{{ showAddress.address }}</div>
        </span>
      </div>
    </div>
    <van-cell>
      <template #title>
        <van-tag type="primary">吃了吗专送</van-tag>
        <span class="custom-title">预计送到时间{{ date }}</span>
      </template>
    </van-cell>
    <div class="gap"></div>
    <van-cell-group>
      <div class="van-cell">
        <section class="description_left">
          <img :src="uploads + shop.image" />
        </section>
        <section class="description_right">
          <h1 class="description_title">{{ shop.name }}</h1>
        </section>
      </div>
      <van-cell title="点餐" :value="this.price + '元'" />
      <van-cell title="配送费" :value="shop.delivery_fee + '元'" />
      <van-cell title="总计" :value="this.price + shop.delivery_fee + '元'" />
    </van-cell-group>
    <van-submit-bar button-text="去结算" @submit="onSubmit" />
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
import axios from "axios";

export default {
  name: "confirmOrder",
  data() {
    return {
      shop: [],
      price: this.$route.query.price / 100,
      date: "",
      showAddress: [],
    };
  },
  computed: {
    ...mapState({
      uploads: (state) => state.uploads,
    }),
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: "shop",
        path: "/shop:id",
        params: { id: this.shop.id },
      });
    },
    onAdd() {
      this.$router.push({
        path: "/addressList",
        query: { id: this.shop.id, price: this.price * 100 },
      });
    },
    onSubmit() {
      axios
        .post("/api/order/addOrder", {
          shopName: this.shop.name,
          image: this.shop.image,
          price: this.price + this.shop.delivery_fee,
        })
        .then((res) => {
          if (res.data.code == 200) {
            Toast.success("支付成功");
            this.$router.push("/order");
          } else {
            Toast.fail("支付失败");
            this.$router.push({
              name: "shop",
              path: "/shop:id",
              params: { id: this.shop.id },
            });
          }
        });
    },
  },
  created() {
    axios.get("/api/shop/shop?id=" + this.$route.query.id).then((response) => {
      this.shop = response.data.data;
    });
    axios
      .get("/api/address/showAddress?index=" + this.$route.query.index)
      .then((response) => {
        this.showAddress = response.data.data;
      });
    var date = new Date();
    if (date.getMinutes() < 10) {
      var dateMinutes = "0" + date.getMinutes();
      this.date = date.getHours() + ":" + dateMinutes;
    } else {
      this.date = date.getHours() + ":" + date.getMinutes();
    }
  },
};
</script>

<style lang="scss" scoped>
>>> .van-nav-bar {
  background: #42a5f3;
  color: #fff;
  .van-icon,
  .van-nav-bar__title {
    color: #fff;
  }
}
>>> .van-cell__title {
  display: flex;
  justify-content: space-between;
}
>>> .van-cell {
  font-size: 16px;
}
.gap {
  height: 5px;
  background: lightgray;
}
.van-cell {
  display: flex;
  .description_left {
    margin-right: 15px;
    img {
      display: block;
      width: 70px;
      height: 50px;
    }
  }
  .description_right {
    flex: 1;
    .description_title {
      width: 100%;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
>>> .van-submit-bar {
  background-color: #3d3d3f;
}
>>> .van-submit-bar__button--danger {
  background: #4cd964;
}
.van-address-item {
  margin: 10px;
  border: 1px solid #42a5f3;
  >>> .van-tag {
    margin-left: 10px;
  }
}
</style>